﻿<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; }
      #map_canvas { margin: auto 0 auto 0; }
    </style>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    
    
    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(-7.162383, -78.510558);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            /* Agregar un Marcador */
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });

            /* Personalizar marcar */

            var image = "/Views/Sector/marker-pink.png";
            var myLatLng = new google.maps.LatLng(-7.155613, -78.514849);
            var nuevoMarker1 = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: 'Casa de Majito'
            });


            /* contenido del div del marker*/
            var infowindow1 = new google.maps.InfoWindow({
                content: createInfo('Casa de Majito', '<br/>Visita la web de mi proyecto SILAS<br/><a title="Click" href="#">Click Aqui</a>')
            });

            /* div del marker */
            function createInfo(title, content) {
                return '<div class="infowindow"><strong>' + title + '</strong> ' + content + '</div>';
            }

            /* Evento Click del marker */
            google.maps.event.addListener(nuevoMarker1, 'click', function () {
                infowindow1.open(map, nuevoMarker1);
            });


        }

    </script>
  </head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>